<template>
    <el-row class="home" :getter="20">
        <el-col :span="8" style="margin-top:20px">
            <el-card shadow="hover" style="width:418px">
                <div class="user">
                    <img :src="userImg">
                    <div class="userInfo">
                        <p class="name">Admin</p>
                        <p class="access">超级管理员</p>
                    </div>
                </div>
                <div class="login-info">
                    <p class="p">上次登录时间：<span>2021-7-19</span></p>
                    <p class="p">上次登录地点：<span>武汉</span></p>
                </div>
            </el-card>
            <el-card style="margin-top:20px;width:418px; height:360px">
                <el-table :data="tableData">
                    <el-table-column 
                    show-overflow-tooltip 
                    v-for="(val,key) in tableLabel"
                    :key="key"
                    :prop="key"
                    :label="val"></el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16">
            <div class="num" style="margin-top:20px">
                <el-card shadow="hover" style="width:260px" v-for="item in countData" :key="item.name"
                :body-style="{display:'flex',padding:0,height:'82px'}">
                    <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}"></i>
                    <div class="detail">
                        <p class="num">￥{{item.value}}</p>
                        <p class="txt">￥{{item.name}}</p>
                    </div>
                </el-card>
            </div>
            <el-card shadow="hover" style="height:280px;width:100%">
                <div style="height:280px;width:100%" ref="echart"></div>
            </el-card>
            <div class="graph">
                <el-card shadow="hover" style="height:260px">
                    <div style="height:240px" ref="userEchart"></div>
                </el-card>
                <el-card shadow="hover" style="height:260px">
                    <div style="height:240px" ref="videoEchart"></div>
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import {getHome} from '../../api/data'
import * as echarts from "echarts"
export default {
    data(){
        return {
            userImg:require("../../assets/logo.png"),
            tableData:[],
            tableLabel:{
                name:'课程',
                todayBuy:"今日购买",
                monthBuy:"本月购买",
                totalBuy:"总购买"
            },
            countData: [
                {
                name: "今日支付订单",
                value: 1234,
                icon: "success",
                color: "#2ec7c9",
                },
                {
                name: "今日收藏订单",
                value: 210,
                icon: "star-on",
                color: "#ffb980",
                },
                {
                name: "今日未支付订单",
                value: 1234,
                icon: "s-goods",
                color: "#5ab1ef",
                },
                {
                name: "本月支付订单",
                value: 1234,
                icon: "success",
                color: "#2ec7c9",
                },
                {
                name: "本月收藏订单",
                value: 210,
                icon: "star-on",
                color: "#ffb980",
                },
                {
                name: "本月未支付订单",
                value: 1234,
                icon: "s-goods",
                color: "#5ab1ef",
                },
            ],
            echartsData:{
                order:{
                    legend:{
                        // 图例文字颜色
                        textStyle:{
                            color:"#333"
                        },
                    },
                    grid:{
                        left:"20%"
                    },
                    // 提示框
                    tooltip:{
                        trigger:"axis"
                    },
                    xAxis:{
                        type:"category",
                        data:[],
                        axisLine:{
                            lineStyle:{
                                color:"#17b3a3"
                            },
                        },
                        axisLabel:{
                            interval:0,
                            color:"#333"
                        },
                    },
                    yAxis:[
                            {
                                type:"value",
                                axisLine:{
                                    lineStyle:{
                                        color:"#17b3a3"
                                    }
                                }
                            }
                    ],
                    color:["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3"],
                    series:[]
                },
                user:{
                    legend:{
                        // 图例文字颜色
                        textStyle:{
                            color:"#333"
                        }
                    },
                    grid:{
                        left:"20%"
                    },
                    // 提示框
                    tooltip:{
                        trigger:"axis"
                    },
                    xAxis:{
                        type:"category",//类目轴
                        data:[],
                        axisLine:{
                            lineStyle:{
                                color:"#17b3a3"
                            }
                        }
                    },
                    yAxis:[
                        {
                            type:"value",
                            axisLine:{
                                lineStyle:{
                                    color:"#17b3a3"
                                }
                            }
                        }
                    ],
                    color:['#2ec7c9',"#b6a2de"],
                    series:[]
                },
                video:{
                    tooltip:{
                        trigger:"item"
                    },
                    color:[
                        "#0f78f4",
                        "#dd536d",
                        "#9462e5",
                        "#a6a6a6",
                        "#e1bb22",
                        "#39c362",
                        "#3ed1cf",
                    ],
                    series:[]
                }
            }
        }
    },
    methods:{
        getTableData(){
            getHome().then((res)=>{
                this.tableData = res.data.data.tableData

                // 折线图的展示
                const order = res.data.data.orderData
                this.echartsData.order.xAxis.data = order.date
                let keyArray = Object.keys(order.data[0])
                keyArray.forEach((key)=>{
                    this.echartsData.order.series.push({
                        name:key,
                        data:order.data.map(item=>item[key]),
                        type:"line"
                    })
                })
                const myEchartsOrder = echarts.init(this.$refs.echart)
                myEchartsOrder.setOption(this.echartsData.order)

                // 用户图
                const userData = res.data.data.userData
                this.echartsData.user.xAxis.data =userData.forEach(item=>{
                    return item.data
                })
                this.echartsData.user.series.push({
                    name:'新增用户',
                    data:userData.map(item=>item.new),
                    type:"bar"
                })
                this.echartsData.user.series.push({
                    name:'活跃用户',
                    data:userData.map(item=>item.active),
                    type:"bar"
                })

                const myEchartsUser = echarts.init(this.$refs.userEchart)
                myEchartsUser.setOption(this.echartsData.user)

                // 饼状图
                this.echartsData.video.series.push({
                    data:res.data.data.videoData,
                    type:"pie"
                })
                const myEchartsVideo = echarts.init(this.$refs.videoEchart)
                myEchartsVideo.setOption(this.echartsData.video)
            })
        }
    },
    mounted(){
        this.getTableData()
    }
}
</script>

<style scoped>
.txt{
    margin: 0;
    margin-bottom: 20px;
}
.p{
    display: flex;
    justify-content: space-between;
}
.access {
        color: #999999;
}
.name {
    font-size: 32px;
    margin-bottom: 10px;
}
img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-right: 40px;
}
.user {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}
p {
      line-height: 28px;
      font-size: 14px;
      color: #999999;
    }
span {
    color: #666666;
    margin-left: 60px;
    text-align:left ;
    }
.el-card {
      width: 32%;
      margin-bottom: 20px;
}
  .num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
.icon {
      font-size: 30px;
      width: 80px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      color: #fff;
    }
.num {
        font-size: 30px;
        margin-bottom: 10px;
      }
.txt {
        font-size: 14px;
        text-align: center;
        color: #999999;
      }
.detail {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  .graph {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .el-card {
      width: 48%;
    }
</style>